<link rel="stylesheet" href="grid.css">

<!-- component template -->
<script type="text/x-template" id="grid-template">
  <table>
    <thead>
      <tr>
        <th v-for="key in columns"
          @click="sortBy(key)"
          :class="{ active: sortKey == key }">
          {{ headernames[key] | capitalize }}
          <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="entry in filteredData">
        <td v-for="key in columns">
          <template v-if="key === 'bssid'">
            <!-- https://vuejs.org/v2/guide/syntax.html#Arguments -->
            <a href="#" v-on:click="select_click(entry[key])">
              {{ entry[key] }}
            </a>
          </template>
          <template v-else-if="key === 'wps_version'">
            {{ entry[key] | wps_version }}
          </template>
          <template v-else>
            {{ entry[key] }}
          </template>
        </td>
      </tr>
    </tbody>
  </table>
</script>

<script type="text/x-template" id="apanel-template">
	<div>
		<template v-if="active === true">
			<p><a href="#" v-on:click="unselect()">back</a></p>
			<div><p>ATTACK!</p></div>
		</template>
	</div>
</script>

<script type="text/x-template" id="searchbox-template">
	<div>
		<template v-if="hidden === false">
			<form id="search">
				Search
				<input name="query"
					v-bind:value="query"
					v-on:input="update_parent($event.target.value)"
				>
			</form>
		</template>
	</div>
</script>


<!-- demo root element -->
<div id="demo">
	<search-box
		@input="update_query"
		:hidden="selected"
		:query="searchQuery" >
	</search-box>
	<demo-grid
		@select_bssid="select"
		:data="gridData"
		:columns="gridColumns"
		:headernames="gridHeaders"
		:filter-key="searchQuery">
	</demo-grid>
	<attack-panel
		@unselect_send_parent="app_unselect"
		:active="selected"
		:bssid="searchQuery" >
	</attack-panel>
</div>

<script src="vue"></script>
<script src="grid.js"></script>

